<template>
  <div>
    <div class="ones">
      <div class="twos">
        <input type="text" class="lll" />
      </div>
      <div class="three" @click="back">返回</div>
    </div>
    <div class="lists">
      <div class="listsx" v-for="(item, index) in shop.res" :key="index">
        <div class="img">
          <img :src="item.img" />
        </div>
        <div class="content">
          <div class="title">{{ item.shopname }}</div>
          <div class="price">￥{{ item.price }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      shop: "",
      response: "",
      input: "",
      drawer: false,
      direction: "btt "
    };
  },
  created() {
    this.show();
  },
  methods: {
    show() {
      let that = this;
      that.shop = that.$route.query.response;
      console.info(that.shop.res);
    },
    back() {
      this.$router.push({
        path: "/search"
      });
    }
  }
};
</script>
<style>
.ones {
  width: 100%;
  height: 50px;
  background: red;
  display: flex;
  flex-direction: row;
}
.twos {
  width: 70%;
  height: 40px;
  margin: 10px;
}
.two text {
  width: 100%;
  height: 90%;
}
.lists {
  width: 100%;
  height: 100%;
  text-align: left;
}
.listsx {
  width: 44%;
  height: 170px;
  display: inline-block;
  margin: 10px;
  border: 1px solid black;
}
.lll {
  width: 60%;
  height: 40%;
}
.img {
  width: 100%;
  height: 120px;
}
.img img {
  width: 100%;
  height: 120px;
}
.content {
  width: 100%;
  height: 80px;
}
.title {
  text-overflow: ellipsis;
  display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
  -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
  -webkit-line-clamp: 1; /** 显示的行数 **/
  overflow: hidden; /** 隐藏超出的内容 **/
}
.price {
  color: red;
}
</style>
